<template>
    <div class="context">
        <div class="title">
            <DetailNumber :item="detailNumber"></DetailNumber>
        </div>
        <div class="list">
            <ListView :list="warningList"
                @clickItem="getWarningInfo"
                ></ListView>
        </div>

    </div>
</template>
<script>
import DetailNumber from '../components/DetailNumber';
import ListView from '../components/ListView';
import { mapGetters } from 'vuex';

export default {
    name: 'LeftView',
    components: { ListView, DetailNumber },
    created() {
        this.$store.dispatch('getWarningList').then(data => {
            // console.log(data);
        });
    },
    computed: {
        ...mapGetters({
            detailNumber: 'detailNumber',
            warningList: 'warningList'
        })
    },
    methods: {
        //获取详情并展示.
        getWarningInfo(item) {
            this.$store.dispatch('showWarnDetail', item);
        }
    }
};
</script>
<style scoped>
.context {
    width: 100%;
    height: 100%;
}
.title {
    height: 35%;
    width: 100%;
}
.list {
    height: 63%;
    width: 96%;
    margin: 0.14rem auto 0;
}
</style>
